<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="projectZylyCode" class="zs-select-md zs-space-right-sm" placeholder="项目名称"
                    @change="changeProject">
                    <el-option v-for="item in projectList" :key="item.projectZylyCode" :label="item.projectName"
                        :value="item.projectZylyCode" />
                </el-select>
                <el-date-picker class="zs-space-right-sm" v-model="searchDate" :type="pickerDate" placeholder="日期"
                    :clearable="false" :value-format="valueFormat" :disabled-date="disabledDateStart" />
                <el-button class="zs-btn-plain" @click="getData()">
                    查询
                </el-button>
            </span>
            <span class="zs-layout-flex-row">
                <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '科目' }"
                    @click="changeTab('科目')">
                    科目
                </div>
                <div class="db-btn zs-space-right-sm" :class="{ 'db-btn-primary': curTab == '月份' }"
                    @click="changeTab('月份')">
                    月份
                </div>
                <el-button class="zs-btn-plain" @click="handleDownload"><el-icon class="el-icon--left">
                        <Upload />
                    </el-icon>导出</el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <SubjectTable v-if="curTab == '科目' && searchDate" :biProjectCode="biProjectCode" :yearmonth="searchDate" :isFresh="isFresh">
            </SubjectTable>
            <MonthTable v-if="curTab == '月份' && searchDate" :biProjectCode="biProjectCode" :year="searchDate" :isFresh="isFresh"></MonthTable>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top">*单位：万元（不含税）</div>
        </div>
    </div>
</template>
<script setup lang="jsx">
import SubjectTable from '@/views/SelfSupport/detailPages/budgetcAhievement/subjectTable'
import MonthTable from '@/views/SelfSupport/detailPages/budgetcAhievement/monthTable'
import { ref } from 'vue'
import dbPublicApi from '@/api/dbPublic'
import detailApi from '@/api/SelfSupport/detailPages'
import { downloadNewFile } from "@/utils/publicUtils"
import { useRoute } from 'vue-router'
const route = useRoute().query

const updateDate = route.updateDate
const projectZylyCode = ref(route.projectZylyCode)
const tabPermi = route.tabPermi
let curTab = ref(route.curTab == '月度' ? '月份' : '科目')
let biProjectCode = ref('')
let searchDate = ref('')
let valueFormat = ref('')
let pickerDate = ref('')
let isFresh = ref('')

// 控制日期选择范围
let startDateYear = ref('')
let endDateYear = ref('')
let startDateMonth = ref('')
let endDateMonth = ref('')

// 项目下拉选
let projectList = ref([])

// 获取项目下拉选
const getPorjectList = async () => {
    await dbPublicApi.queryProjectPcApi({ dataTime: updateDate, resourceKey: tabPermi }).then((res) => {
        if (res.data.code == 200) {
            projectList.value = res.data.data
        }
    })
}
// 切换项目时 获取biProjectCode
const changeProject = () => {
    // const index = projectList.value.findIndex(item => {
    //     return item.projectZylyCode == projectZylyCode.value
    // })
    // biProjectCode.value = projectList.value[index].biProjectCode
    biProjectCode.value = projectZylyCode.value
}
// 根据项目获取日期相关数据
const getDateInfo = async () => {
    await detailApi.queryDateTimePcApi({ biProjectCode: biProjectCode.value }).then((res) => {
        if (res.data.code == 200) {
            startDateYear.value = res.data.data.earlyYear
            endDateYear.value = res.data.data.lateYear
            startDateMonth.value = res.data.data.earlyYearMonth
            endDateMonth.value = res.data.data.lateYearMonth
        }
    })
}
const initDate = () => {
    if (curTab.value == '月份') {
        searchDate.value = endDateYear.value
        valueFormat.value = 'YYYY'
        pickerDate.value = 'year'
    }
    if (curTab.value == '科目') {
        searchDate.value = endDateMonth.value
        valueFormat.value = 'YYYY-MM'
        pickerDate.value = 'month'
    }
}

// 日期筛选控制
const disabledDateStart = (date) => {
    if (curTab.value == '月份') {
        return date.getTime() < new Date(startDateYear.value).getTime() || date.getTime() > new Date(endDateYear.value).getTime()
    }
    if (curTab.value == '科目') {
        return date.getTime() < new Date(startDateMonth.value).getTime() || date.getTime() > new Date(endDateMonth.value).getTime()
    }
}
// tab 切换
const changeTab = (value) => {
    curTab.value = value
    initDate()
}

const init = async () => {
    await getPorjectList()
    changeProject()
    await getDateInfo()
    initDate()
}
init()

const getData = () => {
    isFresh.value = new Date().getTime()
}
// 导出
const handleDownload = async () => {
    const fileName = `${curTab.value}明细.xls`
    let fileData
    if (curTab.value == '月份') {
        await detailApi.monthExportApi({ biProjectCode: biProjectCode.value, year: searchDate.value }).then(res => {
        // await detailApi.monthExportApi({ biProjectCode: 'SH_HSH_JAZY', year: searchDate.value }).then(res => {
            fileData = res.data
        })
        downloadNewFile(fileData, fileName)
    }
    if (curTab.value == '科目') {
        await detailApi.subjectExportApi({ biProjectCode: biProjectCode.value, yearmonth: searchDate.value }).then(res => {
        // await detailApi.subjectExportApi({ biProjectCode: 'SH_HSH_JAZY', yearmonth: searchDate.value }).then(res => {
            fileData = res.data
        })
        downloadNewFile(fileData, fileName)
    }

}
</script>
  
<style scoped lang="scss"></style>